<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全部订单</title>
    <link rel="stylesheet" href="css/allorder.css">
    <link rel="stylesheet" href="css/base.css">
    <script src="js/rem.js"></script>
</head>

<body>
    <div id="container">
        <header>
            <div class="header">
                <a href="usercenter.html"><img src="images/retrun_black.png" alt=""></a>
                <p class="">我的订单</p>
            </div>
        </header>
        <div class="search">
            <img src="images/allorder_seach.png" alt="">
            <input type="text" placeholder="搜索我的订单">
            <ul>
                <li class="active">全部订单</li>
                <li>待付款</li>
                <li>待发货</li>
                <li>待收货</li>
                <li>退货</li>
            </ul>
        </div>
        <!-- 全部订单 -->
        <div id="content" style="display: block;">
            <p class="record">共 4 条记录</p>
            <div class="itemOne">
                <div class="payment ColorOne">买家已付款</div>
                <div class="product">
                    <div class="product_left"></div>
                    <div class="product_mid">
                        <p>依泉润唇膏套装 保湿滋润补水无色防干裂 唇部护理唇膜淡化唇纹护唇膏...</p>
                        <p>8g/ml</p>
                    </div>
                    <div class="product_rigth">
                        <p>¥98.9</p>
                        <p>×1</p>
                    </div>
                </div>
                <div class="remindOne">
                    <p>提醒发货</p>
                </div>
            </div>
            <div class="itemOne">
                <div class="payment ColorTwo">卖家已发货</div>
                <div class="product">
                    <div class="product_left"></div>
                    <div class="product_mid">
                        <p>依泉润唇膏套装 保湿滋润补水无色防干裂 唇部护理唇膜淡化唇纹护唇膏...</p>
                        <p>8g/ml</p>
                    </div>
                    <div class="product_rigth">
                        <p>¥98.9</p>
                        <p>×1</p>
                    </div>
                </div>

                <div class="remindTwo">
                    <p>查看物流</p>
                </div>
                <div class="logistics">确认收货</div>

            </div>
            <div class="itemOne">
                <div class="payment Colorthree">交易成功</div>
                <div class="product">
                    <div class="product_left"></div>
                    <div class="product_mid">
                        <p>依泉润唇膏套装 保湿滋润补水无色防干裂 唇部护理唇膜淡化唇纹护唇膏...</p>
                        <p>8g/ml</p>
                    </div>
                    <div class="product_rigth">
                        <p>¥98.9</p>
                        <p>×1</p>
                    </div>
                </div>
                <div class="remindOne changecolor">
                    <p>删除订单</p>
                </div>
            </div>
            <div class="itemOne">
                <div class="payment Colorfour">退款成功</div>
                <div class="product">
                    <div class="product_left"></div>
                    <div class="product_mid">
                        <p>依泉润唇膏套装 保湿滋润补水无色防干裂 唇部护理唇膜淡化唇纹护唇膏...</p>
                        <p>8g/ml</p>
                    </div>
                    <div class="product_rigth">
                        <p>¥98.9</p>
                        <p>×1</p>
                    </div>
                </div>
                <div class="remindTwo">
                    <p>删除记录</p>
                </div>
                <div class="logistics changecolor">查看详情</div>
            </div>

        </div>
        <!-- 待付款 -->
        <div id="content" class="content">
            <P class="content_PO">您还没有相关的订单</P>
            <P class="content_PT">快去看看有没有喜欢的吧~</P>
        </div>
        <!-- 待发货 -->
        <div id="content">
            <p>共 1 条记录</p>
            <div class="itemOne">
                <div class="payment ColorOne">买家已付款</div>
                <div class="product">
                    <div class="product_left"></div>
                    <div class="product_mid">
                        <p>依泉润唇膏套装 保湿滋润补水无色防干裂 唇部护理唇膜淡化唇纹护唇膏...</p>
                        <p>8g/ml</p>
                    </div>
                    <div class="product_rigth">
                        <p>¥98.9</p>
                        <p>×1</p>
                    </div>
                </div>
                <div class="remindOne">
                    <p>提醒发货</p>
                </div>
            </div>
        </div>
        <!-- 待收货 -->
        <div id="content">
            <p>共 1 条记录</p>
            <div class="itemOne">
                <div class="payment ColorTwo">卖家已发货</div>
                <div class="product">
                    <div class="product_left"></div>
                    <div class="product_mid">
                        <p>依泉润唇膏套装 保湿滋润补水无色防干裂 唇部护理唇膜淡化唇纹护唇膏...</p>
                        <p>8g/ml</p>
                    </div>
                    <div class="product_rigth">
                        <p>¥98.9</p>
                        <p>×1</p>
                    </div>
                </div>

                <div class="remindTwo">
                    <p>查看物流</p>
                </div>
                <div class="logistics">确认收货</div>
            </div>
        </div>
        <!-- 退货 -->
        <div id="content">
            <p>共 1 条记录</p>
            <div class="itemOne">
                <div class="payment Colorfour">退款成功</div>
                <div class="product">
                    <div class="product_left"></div>
                    <div class="product_mid">
                        <p>依泉润唇膏套装 保湿滋润补水无色防干裂 唇部护理唇膜淡化唇纹护唇膏...</p>
                        <p>8g/ml</p>
                    </div>
                    <div class="product_rigth">
                        <p>¥98.9</p>
                        <p>×1</p>
                    </div>
                </div>
                <div class="remindTwo">
                    <p>删除记录</p>
                </div>
                <div class="logistics changecolor">查看详情</div>
            </div>
        </div>
    </div>
    <script src="js/allorder.js"></script>
</body>

</html>